<template>
	<!-- tabs组件 -->
	<view style="width: 100%;">
		<scroll-view class="scroll" scroll-x='true' scroll-with-animation :scroll-left='scrollLeft'>
			<view v-for="(item,index) in list" :key="index" @click="getColor(item,index)"
				class="flex-shrink px-2 py-1 scroll-item"
				:style="{color:act==index?'#007bff':'',borderBottom:act==index?'2px solid #007bff':''}">{{item}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			// 传入的数组，格式:['xxxx','xxx','xxxx']
			list: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				act: 0, //高亮显示
				scrollLeft: 0 //滚动位置
			}
		},
		methods: {
			// 切换当前Tab
			getColor(item, index) {
				this.act = index //点击的高亮
				this.$emit('getTabs', index) //点击后传数据给父组件
				console.log('item===>>',item);
				console.log('index===>>',index);
				this.moveTo(index) //滚动到中间
			},
			// 将点击元素移动到中间
			moveTo(index) {
				const query = uni.createSelectorQuery().in(this)
				query
					.selectAll(`.scroll-item`) //拿到每一个tabs标签
					.boundingClientRect(rect => {
						const {
							windowWidth
						} = uni.getSystemInfoSync(); //获取屏幕宽度
						let width = 0
						// 循环获取计算当前点击的标签项距离左侧的距离
						for (let i = 0; i < index; i++) {
							width += rect[i].width
						}
						// 当大于屏幕一半的宽度则滚动，否则就设置位置为0
						if (width > windowWidth / 2) {
							this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
						} else {
							this.scrollLeft = 0
						}
					}).exec()
			}
		}
	}
</script>

<style lang="scss">
	.scroll {
		width: 100%;
		white-space: nowrap; //标签不换行
		view {
			display: inline-block;
			font-size: 30upx;
			font-weight: 400;
			line-height: 42upx;
			padding: 18upx 30upx;
			margin-right: 2vw;
			color: #000;
			position: relative;
			font-size: 1.1rem;
			z-index: 4;
			&.active {
				font-size: 36upx;
				font-weight: 800;
				line-height: 50upx;
			}

			&.active::after {
				content: '';
				display: block;
				width: 100%;
				border-left: 30upx solid #fff;
				border-right: 30upx solid #fff;
				box-sizing: border-box;
				height: 19upx;
				position: absolute;
				left: 0;
				bottom: 19upx;
				background: #FFC385;
				z-index: -1;
			}
		}
	}
</style>

